<!--
 * @Description: 
 * @Date: 2023-03-10 16:00:40
 * @LastEditors: czp
 * @LastEditTime: 2023-05-08 09:41:53
-->
<template>
	<div class="search">
		<el-form label-width="auto" inline>
			<div class="search-box">
				<el-form-item label="关键字">
					<el-input placeholder="搜索内容">
						<template #append>
							<el-button class="s-btn" color="#8A1313">
								<template #icon> <IEpSearch /> </template>
							</el-button>
						</template>
					</el-input>
				</el-form-item>
			</div>
			<div class="search-box">
				<el-form-item label="活动开始">
					<el-date-picker type="date" placeholder="开始时间" />
				</el-form-item>
				<el-form-item label="活动结束">
					<el-date-picker type="date" placeholder="结束时间" />
				</el-form-item>
			</div>
			<!-- <div class="search-box">
				<el-form-item label="选择区域">
					<div class="area-box">
						<button @click="activeIndex = index" :class="['btn', { active: activeIndex == index }]" v-for="(i, index) in areaList" :key="index">{{ i.name }}</button>
					</div>
				</el-form-item>
			</div> -->

			<div class="search-box">
				<el-form-item label="月份">
					<div class="area-box">
						<button @click="activeMonth = month.id" :class="['btn', { active: activeMonth == month.id }]" v-for="month in monthList" :key="month.id">
							{{ month.name }}
						</button>
					</div>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>
<script setup lang="ts" name="Search">
import dayjs from "dayjs";

// const areaList = [
// 	{ id: 1, name: "全部" },
// 	{ id: 2, name: "区域一" },
// 	{ id: 3, name: "区域二" },
// 	{ id: 4, name: "区域三" },
// 	{ id: 5, name: "区域四" }
// ];

const monthList = [
	{ id: -1, name: "全部" },
	{ id: 0, name: "一月" },
	{ id: 1, name: "二月" },
	{ id: 2, name: "三月" },
	{ id: 3, name: "四月" },
	{ id: 4, name: "五月" },
	{ id: 5, name: "六月" },
	{ id: 6, name: "七月" },
	{ id: 7, name: "八月" },
	{ id: 8, name: "九月" },
	{ id: 9, name: "十月" },
	{ id: 10, name: "十一月" },
	{ id: 11, name: "十二月" }
];

// const activeIndex = ref(0);
const activeMonth = ref(dayjs().month());
</script>
<style lang="scss" scoped>
.search {
	display: flex;
	padding: 40px 320px 20px;
	font-size: 20px;
	color: #000000;
	background-color: #f9f9f9;
	:deep(.el-form-item__label-wrap) {
		label,
		div {
			font-size: 20px;
			color: #191919;
		}
	}
	.search-box {
		padding-top: 20px;
		padding-bottom: 5px;
		border-bottom: 1px solid #eeeeee;
		&:first-child {
			padding-top: 0;
		}
		&:last-child {
			padding-bottom: 0;
			border-bottom: 0;
		}
		.area-box {
			button.btn {
				padding: 2px 14px;
				margin-right: 10px;
				font-family: SourceSerif;
				font-size: 18px;
				color: #000000;
				cursor: pointer;
				background-color: transparent;
				border: 0;
				&.active {
					color: #ffffff;
					background-color: #8a1313;
				}
			}
		}
	}
	.s-btn {
		color: #ffffff;
		background-color: #8a1313;
	}
}

@media all and (max-width: 750px) {
	.search {
		padding: 16px;
		font-size: 14px;
		:deep(.el-form-item__label-wrap) {
			label,
			div {
				font-size: 14px;
			}
		}
	}
}
</style>
